import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { URL, fileURLToPath } from 'node:url'
import { resolve } from 'path'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { defineConfig, loadEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  const currentEnv = env['VITE_KEY']
  return {
    plugins: [
      vue(),
      vueJsx(),
      Components({
        // 这儿是为了引入ant-design-vue
        resolvers: [
          AntDesignVueResolver({
            importStyle: 'less', // 一定要开启这个配置项
          }),
        ],
      }),
      viteMockServe({
        mockPath: resolve(__dirname, './src/mocks'),
        enable: currentEnv !== 'production',
      }),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    css: {
      postcss: {
        // 如果要传参数就可以使用函数的形式，比如require('tailwindcss')(options)
        plugins: [require('tailwindcss'), require('autoprefixer')],
      },
      preprocessorOptions: {
        scss: {
          // 这儿只引入变量
          // additionalData: '@import "./src/styles/variable.scss";',
        },
        less: {
          modifyVars: {
            // 在这里自定义主题色等样式
            'primary-color': 'red',
          },
          javascriptEnabled: true,
        },
      },
    },
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: currentEnv === 'production' ? true : false,
          drop_debugger: currentEnv === 'production' ? true : false,
        },
      },
    },
  }
})
